<template>
  <a-tabs v-model:activeKey="activeKey" @change="changeItem(activeKey.id)" :type="role === '1' ? 'editable-card' : 'line'" @edit="onEdit">
    <div v-if="panes.length < 1 && ready" class="nothing">
      <div class="nothing__title">没有流程事件</div>
      <div class="nothing__text" v-if="role === '1'">请点击左上角的加号进行添加流程</div>
    </div>
    <a-tab-pane v-for="pane in panes" :key="pane.id" :tab="pane.name">
      <keep-alive>
        <ItemTable :id="pane.id" ref="tableData" />
      </keep-alive>
    </a-tab-pane>
  </a-tabs>
  <add-process-modal ref="openModal" @add="addTab" />
</template>
<script lang="ts">
import { createVNode, defineComponent, ref, onMounted, Ref } from 'vue'
import ItemTable from './ItemTable.vue'
import addProcessModal from './addProcessModal.vue'
import { get, detele } from '../../../utils/request/request'
import { message, Modal } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'

interface PanesValue {
  id: number
  name: string
}
const ready = ref<boolean>(false)

const useAddProcessEffect = () => {
  const openModal = ref()
  const openCheckoutModal = () => {
    openModal.value.showModal()
  }
  return { openModal, openCheckoutModal }
}

const useTabDataEffect = (token: string) => {
  const panes: Ref<PanesValue[]> = ref([])
  const activeKey = ref(panes.value[0])
  const tableData = ref()
  const getData = async () => {
    const res: any = await get('/admin/api/v1/recruitment/process/list?page=1&limit=100', token)
    console.log(res)
    if (res.data !== null) {
      panes.value = res.data
    }
    ready.value = true
  }
  const changeItem = (activeKey: number) => {
    tableData.value.getData(activeKey)
  }
  return { panes, activeKey, tableData, getData, changeItem }
}

const useOperationEffect = (token: string, panes: Ref<PanesValue[]>) => {
  const { openModal, openCheckoutModal } = useAddProcessEffect()
  const newTabIndex = ref(0)
  const onEdit = (targetKey: string | MouseEvent, action: string) => {
    if (action === 'add') {
      add()
    } else {
      remove(targetKey as string)
    }
  }
  const add = () => {
    openCheckoutModal()
  }
  const addTab = (item: PanesValue) => {
    console.log('add', item)
    panes.value.push(item)
  }
  const remove = (targetKey: string) => {
    Modal.confirm({
      title: '你确定要删除该流程吗？',
      content: createVNode('div', { style: 'color:red;' }, '删除后无法恢复'),
      async onOk() {
        const id = Number(targetKey)
        const res: any = await detele(`/admin/api/v1/recruitment/process/${id}`, {}, token)
        console.log(res)
        if (res.status_code === 0) {
          panes.value = panes.value.filter((pane) => pane.id !== id)
          message.success('删除成功')
        } else {
          message.error('删除失败')
        }
      }
    })
  }
  return { openModal, newTabIndex, onEdit, addTab }
}

export default defineComponent({
  components: {
    ItemTable,
    addProcessModal
  },
  setup() {
    const role = ref<string>(localStorage.getItem('role') as string)
    const token: string = localStorage.getItem('token') as string
    const isValue = ref<boolean>(false)
    const { panes, activeKey, tableData, getData, changeItem } = useTabDataEffect(token)
    const { openModal, newTabIndex, onEdit, addTab } = useOperationEffect(token, panes)
    onMounted(() => {
      getData()
    })

    return {
      role,
      ready,
      isValue,
      panes,
      activeKey,
      tableData,
      changeItem,
      openModal,
      onEdit,
      addTab,
      newTabIndex
    }
  }
})
</script>

<style lang="less" scoped>
.nothing {
  text-align: center;
  font-size: 20px;
  padding: 50px;
  margin: 5vh auto;
  width: 600px;
  // border: 2px solid #ddd;
  box-shadow: #c8c8c8 5px 5px 15px;
  border-radius: 5px;
  &__title {
    color: red;
    font-weight: bold;
    font-size: 30px;
  }
  &__text {
    color: #666;
  }
}
</style>
